<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="icon" type="image/png" href="https://i.loli.net/2018/05/11/5af50d7591443.jpg">
    <title>加华国际英语—雅思能力测试</title>
    <link href="https://cdn.bootcss.com/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/jh/question/questions.css">
</head>

<body>
    <div id="app">
        <!--顶部计时器-->
        <div class="top" v-cloak data-am-sticky>
            <img src="https://i.loli.net/2018/10/17/5bc703edf34d6.png" alt="">
            <h3>雅思能力测试</h3>
            <div id="clock"></div>
            <nav class="scrollspy-nav" data-am-scrollspynav="{offsetTop: 130}">
                <ul>
                    <li><a href="#Vocabulary">Vocabulary</a></li>
                    <li><a href="#Grammar">Grammar</a></li>
                    <li><a href="#Reading">Reading</a></li>
                    <li><a href="#Listening">Listening</a></li>
                </ul>
            </nav>
        </div>
        <div class="main">
            <!--vocabulary-->
            <h2 id="Vocabulary">Vocabulary</h2>
            <div class="question1" v-for="(item,index) in questions.vocabulary" v-cloak>
                <h3>{{index+1}}. {{item.question}}</h3>
                <ul>
                    <li :class="[item.currentOption == 1 ? 'current-color' : '']" @click="vocabularyClickCurrent(1,index)">
                        <span :class="[item.currentOption == 1 ? 'current-circle' : '']">A</span>.&nbsp;{{item.optionA}}
                    </li>
                    <li :class="[item.currentOption == 2 ? 'current-color' : '']" @click="vocabularyClickCurrent(2,index)">
                        <span :class="[item.currentOption == 2 ? 'current-circle' : '']">B</span>.&nbsp;{{item.optionB}}
                    </li>
                    <li :class="[item.currentOption == 3 ? 'current-color' : '']" @click="vocabularyClickCurrent(3,index)">
                        <span :class="[item.currentOption == 3 ? 'current-circle' : '']">C</span>.&nbsp;{{item.optionC}}
                    </li>
                    <li :class="[item.currentOption == 4 ? 'current-color' : '']" @click="vocabularyClickCurrent(4,index)">
                        <span :class="[item.currentOption == 4 ? 'current-circle' : '']">D</span>.&nbsp;{{item.optionD}}
                    </li>
                </ul>
            </div>
            <!--Grammar-->
            <h2 id="Grammar">Grammar</h2>
            <div class="question1" v-for="(item,index) in questions.grammar" v-cloak>
                <h3>{{index+1+9}}. {{item.question}}</h3>
                <ul>
                    <li :class="[item.currentOption == 1 ? 'current-color' : '']" @click="grammarClickCurrent(1,index)">
                        <span :class="[item.currentOption == 1 ? 'current-circle' : '']">A</span>.&nbsp;{{item.optionA}}
                    </li>
                    <li :class="[item.currentOption == 2 ? 'current-color' : '']" @click="grammarClickCurrent(2,index)">
                        <span :class="[item.currentOption == 2 ? 'current-circle' : '']">B</span>.&nbsp;{{item.optionB}}
                    </li>
                    <li :class="[item.currentOption == 3 ? 'current-color' : '']" @click="grammarClickCurrent(3,index)">
                        <span :class="[item.currentOption == 3 ? 'current-circle' : '']">C</span>.&nbsp;{{item.optionC}}
                    </li>
                    <li :class="[item.currentOption == 4 ? 'current-color' : '']" @click="grammarClickCurrent(4,index)">
                        <span :class="[item.currentOption == 4 ? 'current-circle' : '']">D</span>.&nbsp;{{item.optionD}}
                    </li>
                </ul>
            </div>
            <!--Reading-->
            <h2 id="Reading">Reading</h2>
            <div class="question1" v-for="(item,index) in questions.reading" v-cloak>
                <h3>{{index+1+9+6}}. {{item.question}}</h3>
                <ul>
                    <li :class="[item.currentOption == 1 ? 'current-color' : '']" @click="readingClickCurrent(1,index)">
                        <span :class="[item.currentOption == 1 ? 'current-circle' : '']">A</span>.&nbsp;{{item.optionA}}
                    </li>
                    <li :class="[item.currentOption == 2 ? 'current-color' : '']" @click="readingClickCurrent(2,index)">
                        <span :class="[item.currentOption == 2 ? 'current-circle' : '']">B</span>.&nbsp;{{item.optionB}}
                    </li>
                    <li :class="[item.currentOption == 3 ? 'current-color' : '']" @click="readingClickCurrent(3,index)">
                        <span :class="[item.currentOption == 3 ? 'current-circle' : '']">C</span>.&nbsp;{{item.optionC}}
                    </li>
                    <li :class="[item.currentOption == 4 ? 'current-color' : '']" @click="readingClickCurrent(4,index)">
                        <span :class="[item.currentOption == 4 ? 'current-circle' : '']">D</span>.&nbsp;{{item.optionD}}
                    </li>
                </ul>
            </div>
            <!--Listening-->
            <h2 id="Listening">Listening</h2>
            <div class="question2">
                <div @click='onPlay(1)' class="audio"> <span :class="[currentAudio == 1 ? 'am-icon-pause' : 'am-icon-play']"></span></div>
                <audio :src="questions.listening.spotDictation1[0].audio" preload="auto" id='audio1' class="audios">你的浏览器还不支持播放音频，请升级浏览器或试试别的浏览器</audio>
                <h3>1.Listen and write down the letters or number you hear. There are totally 8 groups of answers.</h3>
                <ul>
                    <li>
                        21. <input type="text" v-model="questions.listening.spotDictation1[0].spell[0]">
                    </li>
                    <li>
                        22. <input type="text" v-model="questions.listening.spotDictation1[0].spell[1]">
                    </li>
                    <li>
                        23. <input type="text" v-model="questions.listening.spotDictation1[0].spell[2]">
                    </li>
                    <li>
                        24. <input type="text" v-model="questions.listening.spotDictation1[0].spell[3]">
                    </li>
                    <li>
                        25. <input type="text" v-model="questions.listening.spotDictation1[0].spell[4]">
                    </li>
                    <li>
                        26. <input type="text" v-model="questions.listening.spotDictation1[0].spell[5]">
                    </li>
                    <li>
                        27. <input type="text" v-model="questions.listening.spotDictation1[0].spell[6]">
                    </li>
                    <li>
                        28. <input type="text" v-model="questions.listening.spotDictation1[0].spell[7]">
                    </li>
                </ul>
            </div>
            <div class="question2">
                <div @click='onPlay(2)' class="audio"> <span :class="[currentAudio == 2 ? 'am-icon-pause' : 'am-icon-play']"></span></div>
                <audio :src="questions.listening.spotDictation2[0].audio" preload="auto" id='audio2' class="audios">你的浏览器还不支持播放音频，请升级浏览器或试试别的浏览器</audio>
                <h3>2.Listen to the conversation and fill the gaps. <br />&nbsp;&nbsp;&nbsp;Write NO MORE THAN TWO WORDS AND/OR
                    NUMBERS for each
                    gap.<br />&nbsp;&nbsp;&nbsp;Example : Insurance of Vehicle</h3>
                <ul>
                    <li>
                        29. Policy Number<input type="text" v-model="questions.listening.spotDictation2[0].spell[0]">
                    </li>
                    <li>Make & Model: Masda Marvel</li>
                    <li>
                        30. Engine size<input type="text" v-model="questions.listening.spotDictation2[0].spell[1]">
                    </li>
                    <li>Name: Lisa Marie Heatheate</li>
                    <li>
                        31. Date of Birth<input type="text" v-model="questions.listening.spotDictation2[0].spell[2]">
                    </li>
                    <li>
                        32. Password <input type="text" v-model="questions.listening.spotDictation2[0].spell[3]">
                    </li>
                    <li>Change valuation: Yes</li>
                    <li>
                        33. Reduce value to : $ <input type="text" v-model="questions.listening.spotDictation2[0].spell[4]">
                    </li>
                </ul>
            </div>
            <div class="question2" v-for="(item,ind) in questions.listening.chooseDictation">
                <div @click='onPlay(3)' class="audio"> <span :class="[currentAudio == 3 ? 'am-icon-pause' : 'am-icon-play']"></span></div>
                <audio :src="item.audio" preload="auto" id='audio3' class="audios">你的浏览器还不支持播放音频，请升级浏览器或试试别的浏览器</audio>
                <h3>3. Choose the correct answer A,B,or C</h3>
                <div class="question1" v-for="(question,index) in item.questions" v-cloak>
                    <h3>{{index+34}}. {{question.question}}</h3>
                    <ul>
                        <li :class="[question.currentOption == 1 ? 'current-color' : '']" @click="chooseDictationClickCurrent(1,index,ind)">
                            <span :class="[question.currentOption == 1 ? 'current-circle' : '']">A</span>.&nbsp;{{question.optionA}}
                        </li>
                        <li :class="[question.currentOption == 2 ? 'current-color' : '']" @click="chooseDictationClickCurrent(2,index,ind)">
                            <span :class="[question.currentOption == 2 ? 'current-circle' : '']">B</span>.&nbsp;{{question.optionB}}
                        </li>
                        <li :class="[question.currentOption == 3 ? 'current-color' : '']" @click="chooseDictationClickCurrent(3,index,ind)">
                            <span :class="[question.currentOption == 3 ? 'current-circle' : '']">C</span>.&nbsp;{{question.optionC}}
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 提交答案 -->
            <div class="submit am-cf">
                <button type="button" class="am-btn am-round am-center" @click="toTestResult()">提交</button>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/amazeui/2.7.2/js/amazeui.min.js"></script>
    <script src="http://lib.h-ui.net/jquery.cookie/1.4.1/jquery.cookie.js"></script>
    <script src="https://cdn.bootcss.com/jquery.countdown/2.2.0/jquery.countdown.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
    <script>
    new Vue({
        el: '#app',
        data: {
            QsData: [],
            currentAudio: 0,
            clockStyle: false,
            cookieData: [
                "123", "qwe", "asd", "zxc"
            ],
            correct: 0,
            wrong: 0,
            miss: 0,
            userCookieData: "",
            countTime: {
                hour: 0,
                minutes: 0,
                seconds: 0,
                grammar: 0,
                Reading: 0
            },
            questions: {
                vocabulary: [{
                        question: "They are able to speak a few ______ 、Chinese、English and French.",
                        optionA: "Speech",
                        optionB: "languages",
                        optionC: "words",
                        optionD: "dialects",
                        answer: 2,
                        currentOption: 0
                    },
                    {
                        question: "Each letter on the list ______ a different type of material .",
                        optionA: "gives",
                        optionB: "represents",
                        optionC: "names",
                        optionD: "means",
                        answer: 2,
                        currentOption: 0
                    },
                    {
                        question: "Oily food increases the risk of heart ______.",
                        optionA: "ill",
                        optionB: "sick",
                        optionC: "disease",
                        optionD: "illness",
                        answer: 3,
                        currentOption: 0
                    },
                    {
                        question: "Nothing can be better than to be back in ______ after a few days to camp in the wild field.",
                        optionA: "modernity",
                        optionB: "reality",
                        optionC: "culture",
                        optionD: "civilization",
                        answer: 4,
                        currentOption: 0
                    },
                    {
                        question: "The number male and female students of the students in our school is ______ equal.",
                        optionA: "Proportionally ",
                        optionB: "sexually",
                        optionC: "force",
                        optionD: "regarded",
                        answer: 1,
                        currentOption: 0
                    },
                    {
                        question: "This case has been ______ by the police again and again.",
                        optionA: "investigated",
                        optionB: "surveyed",
                        optionC: "researched",
                        optionD: "developed",
                        answer: 1,
                        currentOption: 0
                    },
                    {
                        question: "President G.W. Bush was a ______ figure.",
                        optionA: "welcome",
                        optionB: "controversial",
                        optionC: "conflicted",
                        optionD: "contempt",
                        answer: 2,
                        currentOption: 0
                    },
                    {
                        question: "Teachers should use different ways to get their students ______.",
                        optionA: "smart",
                        optionB: "cleared ",
                        optionC: "inspired",
                        optionD: "educated",
                        answer: 3,
                        currentOption: 0
                    },
                    {
                        question: "Air pollution problem ______ in many big cities of different countries`.",
                        optionA: "has been",
                        optionB: "are",
                        optionC: "exists",
                        optionD: "faces",
                        answer: 3,
                        currentOption: 0
                    }
                ],
                grammar: [{
                        question: "When I was little, I and my friends ______ go to the beach in summer.",
                        optionA: "used to",
                        optionB: "were used to",
                        optionC: "often",
                        optionD: "prefer",
                        answer: 1,
                        currentOption: 0
                    },
                    {
                        question: "If we ______ less busy, we could ______ skiing with other colleagues last winter break.",
                        optionA: "have been, go",
                        optionB: "were, go",
                        optionC: "had been, have gone",
                        optionD: "were, already gone",
                        answer: 3,
                        currentOption: 0
                    },
                    {
                        question: "There are many of us ______ the school should encourage the students to take more social practice.",
                        optionA: "have though",
                        optionB: "think",
                        optionC: "thinking",
                        optionD: "are thinking",
                        answer: 3,
                        currentOption: 0
                    },
                    {
                        question: "Some students still do not know ______ do to improve their oral English.",
                        optionA: "what to",
                        optionB: "what they can",
                        optionC: "how should they",
                        optionD: "how can",
                        answer: 2,
                        currentOption: 0
                    },
                    {
                        question: " Glass, ______ made since the time of the Mesopotamians and Egyptians, is little more than a mixture of sand, soda ash and lime.",
                        optionA: "what were",
                        optionB: "which were",
                        optionC: "which has been",
                        optionD: "which is",
                        answer: 3,
                        currentOption: 0
                    },
                    {
                        question: "The planet Venus, ______ after the Roman goddess of love, is the second closest planet to the Sun, and the second brightest natural object in the night sky.",
                        optionA: "naming",
                        optionB: "given name",
                        optionC: "named ",
                        optionD: "names",
                        answer: 3,
                        currentOption: 0
                    }
                ],
                reading: [{
                        question: "Which of the following explanations best describes “agree” ?",
                        optionA: "to give your permission for something",
                        optionB: "to say yes to an offer or invitation",
                        optionC: "to have the same opinion as someone else",
                        optionD: "to support his idea by doing something",
                        answer: 3,
                        currentOption: 0
                    },
                    {
                        question: "Sandy: if I had got enough money, I would have gone for the trip to Europe. What does Sandy mean in her words ?",
                        optionA: "She went to Europe.",
                        optionB: "She didn`t go to Europe",
                        optionC: "She didn`t want to go to Europe",
                        optionD: "She didn`t have money",
                        answer: 2,
                        currentOption: 0
                    },
                    {
                        question: "Lecture: 'Now,Monosodium  Glutamate, or MSG, as you probably know, is a  flavor enhancer which is used particularly in Chinese and Japanese cooking. Today I'm going to explore why it is so popular in Chinese cuisines and, more importantly, how does it enhance the flavor of food?' What is the main topic of the lecture ? ",
                        optionA: "The history of MSG",
                        optionB: "the way MSG works",
                        optionC: "where MSG is used",
                        optionD: "MSG is popular in some Asian countries",
                        answer: 2,
                        currentOption: 0
                    },
                    {
                        question: "As a whole, European countries see forests as performing a triple function: biological, economic and recreational. The first is to act as a green lung for our planet by means of photosynthesis, forests produce oxygen through the transformation of solar energy thus fulfilling what for humans is the essential role of an immense, non-polluting power planet At the same time. Forests provide raw materials for human activities through their constantly renewed production of wood. Finally, they offer those condemned to spend five days a week in an urban environment an unrivalled area of freedom to unwind and take part in a range of leisure activities, such as hunting. riding and hiking. which of the following information is contained in the paragraph?",
                        optionA: "The most important function of forests in Asia is to fresh the air",
                        optionB: "Europeans mainly consider forests as two main roles",
                        optionC: "More and more people enjoy hunting, riding, and hiking in forests",
                        optionD: "Forests are a renewable source of raw material",
                        answer: 2,
                        currentOption: 0
                    },
                    {
                        question: "Bullying is clearly unpleasant, and can make the child experiencing it feel unworthy and depressed. In extreme cases it can even lead to suicide, though this is thankfully rare. Victim pupils are more likely to experience difficulties with interpersonal relationships as adults, while children who persistently bully are more likely to grow up to be physically violent, and convicted of anti-social offences. Which of the following headings best describes the paragraph?",
                        optionA: "Reasons for the increased rate of bullying",
                        optionB: "The effect of bullying on the children involved",
                        optionC: "The reaction from schools to enquiries about",
                        optionD: "The failure of family education bullying",
                        answer: 2,
                        currentOption: 0
                    }
                ],
                listening: {
                    spotDictation1: [{
                        audio: "/jh/question/1听力字母和数字.mp3",
                        question: "Listen and write down the letters or number you hear. There are totally 8 groups of answers.",
                        spell: ["", "", "", "", "", "", "", ""],
                        answer: [
                            "wright",
                            "ludlow",
                            "whitworth",
                            "cuooper",
                            "hewitt",
                            "pk2@cat.com",
                            "helpline@blackcat.com",
                            "J.Whitton"
                        ]
                    }],
                    spotDictation2: [{
                        audio: "/jh/question/2.对话填空.mp3",
                        question: "Listen to the conversation and  fill the gaps.Write NO MORE THAN TWO WORDS AND/OR NUMBERS for each gap.Example : Insurance of Vehicle",
                        spell: ["", "", "", "", ""],
                        answer: [
                            ["zqw5009", "ZQW5009"],
                            ["2500cc", "2500CC", "2500 cc", "2500 CC"],
                            ["22nd August", "August 22nd", "22 August", "August 22", "22nd Aug.", "Aug. 22nd", "22 Aug.",
                                "Aug. 22"
                            ],
                            ["Jack1897"],
                            ["15000"]
                        ]
                    }],
                    chooseDictation: [{
                        audio: "/jh/question/3.对话选择.mp3",
                        questions: [{
                                question: "what did Nadia buy at the book shop ?",
                                optionA: "a newspaper",
                                optionB: "crossword puzzles",
                                optionC: "a novel",
                                answer: 1,
                                currentOption: 0
                            },
                            {
                                question: "Thomas is interested in the play about?",
                                optionA: "a hunter",
                                optionB: "a doctor",
                                optionC: "a pirate",
                                answer: 2,
                                currentOption: 0
                            },
                            {
                                question: "The couple in the bookshop were discussing?",
                                optionA: "a funny play",
                                optionB: "a boring play",
                                optionC: "a smooth play",
                                answer: 1,
                                currentOption: 0
                            },
                            {
                                question: "How does Nadia want her coffee?",
                                optionA: "sweet and black",
                                optionB: "black with no sugar",
                                optionC: "with milk",
                                answer: 1,
                                currentOption: 0
                            },
                            {
                                question: "what kind of muffin does Nadia want?",
                                optionA: "plain",
                                optionB: "chocolate",
                                optionC: "berry",
                                answer: 3,
                                currentOption: 0
                            }
                        ]
                    }]
                }
            }
        },

        mounted() {
            //登录验证
            this.verify()
            //加载倒计时
            this.countdown()

        },

        methods: {
            //登录验证
            verify() {
                var cookie = $.cookie('user_cookie');
                $.cookie('user_cookie', null);
                if (cookie == null) {
                    // console.log('ckn')
                }
                // alert(cookie)
                // console.log(cookie)
                // var isIncludes = this.cookieData.includes(cookie)
                // if (!isIncludes) {
                //     alert("账号不对")
                //     window.location.href = "/"
                // }
                this.userCookieData = cookie;
                // $.cookie('use_cookie', null);
            },

            //设置倒计时
            countdown() {
                const minutes = 45; //设置倒计时间，分钟为单位
                const finalDate = new Date(Date.parse(new Date()) + minutes * 60 * 1000);
                const the = this;
                $('#clock').countdown(finalDate, function(event) {
                    $(this).html(event.strftime('倒计时：%H : %M : %S'));
                }).on("finish.countdown", function() {
                    the.toTestResult();
                });
            },

            // 点击答案触发事件
            vocabularyClickCurrent(option, index) {
                if (this.questions.vocabulary[index].currentOption == option) {
                    this.questions.vocabulary[index].currentOption = 0; //判断是否已经选中，再点击取消选中
                } else {
                    this.questions.vocabulary[index].currentOption = option; //更改所选答案样式。
                }
            },
            grammarClickCurrent(option, index) {
                if (this.questions.grammar[index].currentOption == option) {
                    this.questions.grammar[index].currentOption = 0; //判断是否已经选中，再点击取消选中
                } else {
                    this.questions.grammar[index].currentOption = option; //更改所选答案样式。
                }
            },
            readingClickCurrent(option, index) {
                if (this.questions.reading[index].currentOption == option) {
                    this.questions.reading[index].currentOption = 0; //判断是否已经选中，再点击取消选中
                } else {
                    this.questions.reading[index].currentOption = option; //更改所选答案样式。
                }
            },
            chooseDictationClickCurrent(option, index, ind) {
                if (this.questions.listening.chooseDictation[ind].questions[index].currentOption == option) {
                    this.questions.listening.chooseDictation[ind].questions[index].currentOption = 0; //判断是否已经选中，再点击取消选中
                } else {
                    this.questions.listening.chooseDictation[ind].questions[index].currentOption = option; //更改所选答案样式。 
                }
            },

            //audio控件
            onPlay(id) {
                //获取当前点击
                var key = '#audio' + id
                var thisAudio = $(key)[0]
                if (this.currentAudio != id) { //判断当前点击的是否已在播放
                    //全部暂停重置
                    var audios = $(".audios");
                    for (var i = 0; i < audios.length; i++) {
                        var audio = audios[i]
                        audio.pause();
                        audio.currentTime = 0;
                    }
                    //播放当前的
                    this.currentAudio = id;
                    thisAudio.play();
                    //播放完之后重置
                    const the = this;
                    thisAudio.addEventListener('ended', function() {
                        thisAudio.currentTime = 0;
                        the.currentAudio = 0;
                    }, true);

                } else {
                    //在播放的话就重置
                    this.currentAudio = 0;
                    thisAudio.pause();
                    thisAudio.currentTime = 0;
                }
            },


            //处理数据，判断对错
            processData() {
                const vocabularyLength = this.questions.vocabulary.length;
                for (let i = 0; i < vocabularyLength; i++) {
                    const currentOption = this.questions.vocabulary[i].currentOption;
                    const vocabularyAnswer = this.questions.vocabulary[i].answer;
                    let isCorrect = 0;
                    if (currentOption == 0) {
                        isCorrect = 2;
                    } else if (currentOption == vocabularyAnswer) {
                        isCorrect = 1;
                    } else {
                        isCorrect = 0;
                    };

                    let userAnswer = 0;
                    if (currentOption == 0) {
                        userAnswer = "";
                    } else if (currentOption == 1) {
                        userAnswer = "A";
                    } else if (currentOption == 2) {
                        userAnswer = "B";
                    } else if (currentOption == 3) {
                        userAnswer = "C";
                    } else {
                        userAnswer = "D";
                    };

                    const processedData = {
                        id: i + 1,
                        answer: userAnswer,
                        isCorrect: isCorrect
                    };
                    this.QsData.push(processedData)
                }

                const grammarLength = this.questions.grammar.length;
                for (let i = 0; i < grammarLength; i++) {
                    const currentOption = this.questions.grammar[i].currentOption;
                    const grammarAnswer = this.questions.grammar[i].answer;
                    let isCorrect = 0;
                    if (currentOption == 0) {
                        isCorrect = 2;
                    } else if (currentOption == grammarAnswer) {
                        isCorrect = 1;
                    } else {
                        isCorrect = 0;
                    };

                    let userAnswer = 0;
                    if (currentOption == 0) {
                        userAnswer = "";
                    } else if (currentOption == 1) {
                        userAnswer = "A";
                    } else if (currentOption == 2) {
                        userAnswer = "B";
                    } else if (currentOption == 3) {
                        userAnswer = "C";
                    } else {
                        userAnswer = "D";
                    };

                    const processedData = {
                        id: i + 1 + 9,
                        answer: userAnswer,
                        isCorrect: isCorrect
                    };
                    this.QsData.push(processedData)
                }

                const readingLength = this.questions.reading.length;
                for (let i = 0; i < readingLength; i++) {
                    const currentOption = this.questions.reading[i].currentOption;
                    const readingAnswer = this.questions.reading[i].answer;
                    let isCorrect = 0;
                    if (currentOption == 0) {
                        isCorrect = 2;
                    } else if (currentOption == readingAnswer) {
                        isCorrect = 1;
                    } else {
                        isCorrect = 0;
                    };

                    let userAnswer = 0;
                    if (currentOption == 0) {
                        userAnswer = "";
                    } else if (currentOption == 1) {
                        userAnswer = "A";
                    } else if (currentOption == 2) {
                        userAnswer = "B";
                    } else if (currentOption == 3) {
                        userAnswer = "C";
                    } else {
                        userAnswer = "D";
                    };

                    const processedData = {
                        id: i + 1 + 9 + 6,
                        answer: userAnswer,
                        isCorrect: isCorrect
                    };
                    this.QsData.push(processedData)
                }

                const answerLenght1 = this.questions.listening.spotDictation1[0].answer.length;
                for (let i = 0; i < answerLenght1; i++) {
                    const spotDictationSpell1 = this.questions.listening.spotDictation1[0].spell[i];
                    const spotDictationAnswer1 = this.questions.listening.spotDictation1[0].answer[i];
                    let isCorrect = 0;
                    if (spotDictationSpell1 == "") {
                        isCorrect = 2;
                    } else if (spotDictationSpell1 == spotDictationAnswer1) {
                        isCorrect = 1;
                    } else {
                        isCorrect = 0;
                    }
                    const processedData = {
                        id: i + 1 + 9 + 6 + 5,
                        answer: spotDictationSpell1,
                        isCorrect: isCorrect
                    };
                    this.QsData.push(processedData)
                }

                const answerLenght2 = this.questions.listening.spotDictation2[0].answer.length;
                for (let i = 0; i < answerLenght2; i++) {
                    const spotDictationSpell2 = this.questions.listening.spotDictation2[0].spell[i];
                    const spotDictationAnswer2 = this.questions.listening.spotDictation2[0].answer[i];
                    let isCorrect = 0;
                    if (spotDictationSpell2 == "") {
                        isCorrect = 2;
                    } else if (spotDictationAnswer2.includes(spotDictationSpell2)) {
                        isCorrect = 1;
                    } else {
                        isCorrect = 0;
                    }
                    const processedData = {
                        id: i + 1 + 9 + 6 + 5 + 8,
                        answer: spotDictationSpell2,
                        isCorrect: isCorrect
                    };
                    this.QsData.push(processedData)
                }

                const chooseDictationLength = this.questions.listening.chooseDictation[0].questions.length;
                for (let i = 0; i < chooseDictationLength; i++) {
                    const chooseDictationCurrentOption = this.questions.listening.chooseDictation[0].questions[i].currentOption;
                    const chooseDictationAnswer = this.questions.listening.chooseDictation[0].questions[i].answer;
                    let isCorrect = 0;
                    if (chooseDictationCurrentOption == 0) {
                        isCorrect = 2;
                    } else if (chooseDictationCurrentOption == chooseDictationAnswer) {
                        isCorrect = 1;
                    } else {
                        isCorrect = 0;
                    };

                    let userAnswer = 0;
                    if (chooseDictationCurrentOption == 0) {
                        userAnswer = "";
                    } else if (chooseDictationCurrentOption == 1) {
                        userAnswer = "A";
                    } else if (chooseDictationCurrentOption == 2) {
                        userAnswer = "B";
                    } else if (chooseDictationCurrentOption == 3) {
                        userAnswer = "C";
                    } else {
                        userAnswer = "D";
                    };

                    const processedData = {
                        id: i + 1 + 9 + 6 + 5 + 8,
                        answer: userAnswer,
                        isCorrect: isCorrect
                    };
                    this.QsData.push(processedData)
                }

            },


            //跳转页面
            toTestResult() {
                this.processData();
                const then = this;
                var param = Qs.stringify({
                    code: then.userCookieData,
                    result: JSON.stringify(then.QsData)
                });
                axios({
                        url: '/jh/question/submit',
                        method: 'post',
                        data: param,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .then(function(response) {
                        if (response.data.status == 200) {

                            //cookie 只能直接传字符串，通过JSON.stringify()把对象转化为字符串传递
                            //在取值页面通过JSON.parse($.cookie('the_cookie'))再把字符串转化为对象
                            //要在服务器上运行才有效
                            $.cookie('QsData_cookie', JSON.stringify(then.QsData));
                            console.log(then.QsData)
                            window.location.href = "/jh/question/testResult"
                            console.log("提交成功了");
                        } else {
                            console.log("提交失败了");
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            }
        }
    })
    </script>
</body>

</html>